<!-- 首页 -->
<template>
  <view class="min-h-screen bg-home">
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <logo-navbar title=""></logo-navbar>
      <view class="px-4">
        <view class="flex justify-between items-center mt-4 mb-3">
          <u-search class="flex-1" shape="square" disabled :show-action="false" height="72" bg-color="#fff"
            :input-style="searchInputStyle" placeholder-color="#999" placeholder="搜索学社、ID或创建人"
            @click="navigate('/package_society/pages/search/index?type=society', true)"></u-search>
          <view class="flex-shrink-0 flex items-center">
            <u-image class="ml-4 mr-2" width="34" height="36" src="/static/images/home/ic_create.png"></u-image>
            <view class="c-#333 text-36" @click="onCreateSociety">创建</view>
          </view>
        </view>
        <!-- 我的学社 -->
        <my-society :data="state.societyData" @refresh="loadMySociety"></my-society>
        <view class="mt-5 flex justify-between items-center mb-3">
          <view class="c-#333 text-40 font-bold">热门课程</view>
          <view class="flex items-center">
            <u-image class="mr-1" width="28" height="26" src="/static/images/home/ic_course.png"></u-image>
            <view class="c-#333 text-28" @click="navigate('/package_square/pages/course/list')">全部</view>
          </view>
        </view>
      </view>
      <!-- 热门课程 -->
      <view class="px-4">
        <view class="grid grid-cols-2 gap-3">
          <course-item v-for="(item, index) in state.list" :key="index" :data="item"></course-item>
        </view>
      </view>
    </z-paging-list>
    <!-- 通用提示弹窗 -->
    <u-modal v-model="state.modalConfig.showTipModal" :show-title="false" border-radius="12" :show-confirm-button="false">
      <view class="slot-content">
        <view class="flex justify-center c-#333 text-32 font-bold">温馨提示</view>
        <view @click="state.modalConfig.showTipModal = false"
          class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="text-center c-#333 text-sm my-10">
          {{ state.modalConfig.desc }}
        </view>
        <view class="flex items-center justify-center">
          <view class="btn-save" @click="onTipModalConfrim(state.modalConfig.handle)">{{ state.modalConfig.btnName }}
          </view>
        </view>
      </view>
    </u-modal>
   
    <z-privacy color="#F4AF22" :onNeed='false' :hideTabBar='true'/>
    <button size="default" type="" open-type="contact">
      <view class="w-136 h-136 z-1000 fixed bottom-100 right-30">
        <image class="w-136 h-136" src="/static/images/common/ic_service.jpg"></image>
      </view>
    </button>
  </view>
</template>

<script setup>
import { navigate } from "@/common/util/uni";
import { getMySociety } from '@/common/http/module/society.js'
import { getCurriculumHot } from '@/common/http/module/common.js'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const searchInputStyle = {
  borderRadius: "12rpx",
};
const list = ref();
const state = reactive({
  sceneArray: [], // 扫码进入
  modalConfig: {
    desc: '', // 提示内容
    showTipModal: false, // 提示弹窗
    btnName: '', // 按钮名称,
    handle: '' // 操作事件
  },
  societyData: [],
  list: [],
});

const userInfo = computed(() => userStore.userInfo)

// 获取我的学社
function loadMySociety() {
  if (userStore.isLogin) {
    getMySociety().then(res => {
      state.societyData = res.data
    })
  }
}

// 创建学社
function onCreateSociety() {
  if (!userStore.isLogin) {
    navigate('/package_user/pages/common/login')
    return
  }
  // 企业身份:0=普通,1=顾问,2=客户经理
  const identity = userInfo.value.identity
  // 会员标识:0=非会员,1=VIP,2=黄金会员,3=铂金会员,4=钻石会员
  const vip_level = userInfo.value.vip_level
  // 会员/顾问且有剩余创建个数
  if (identity == 1 || vip_level > 0) {
    if (userInfo.value.club_number > 0) {
      navigate('/package_society/pages/society/add')
    } else {
      // 弹窗提示
      state.modalConfig = {
        showTipModal: true,
        desc: '您的创建学社个数已达上线',
        btnName: '知道了'
      }
    }
  } else {
    // 非会员弹窗提示
    state.modalConfig = {
      showTipModal: true,
      desc: '非常抱歉，给您造成不好的体验，【八零学社】为了保证学社质量，让外贸人有一个良好的学习圈子，仅对会员开放创建学社功能',
      btnName: '了解会员权益',
      handle: 'aboutVip'
    }
    // /package_user/pages/vip/add
  }
}

// 通用弹窗按钮事件 handle => 操作类型
function onTipModalConfrim(handle) {
  if (handle) {
    const handleList = {
      'aboutVip': "/package_user/pages/vip/add"
    }
    navigate(handleList[handle])
  }
  state.modalConfig.showTipModal = false
}

function loadData(page) {
  getCurriculumHot(page).then(res => {
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}
onLoad(options => {
  const parentId = options.parentId
  userStore.setParentId(parentId)
  // 获取识别小程序的scene值
  try {
    const { query } = wx.getEnterOptionsSync()
    if (query && query.scene) {
      const scene = decodeURIComponent(query.scene)
      state.sceneArray = scene.split("_")
    }
  } catch (e) {
    console.log(e);
  }
  // 扫码新用户绑定上下级
  if (state.sceneArray[1]) {
    userStore.setParentId(state.sceneArray[1])
  }
});

onShow(() => {
  loadMySociety()
})

defineExpose({ loadMySociety })
</script>

<style lang="scss" scoped>
.bg-home {
  background: linear-gradient(0deg,
      rgba(246, 246, 246, 1) 0%,
      rgba(249, 249, 249, 1) 50.76%,
      rgba(249, 249, 249, 1) 51%,
      rgba(255, 251, 239, 1) 97.54%,
      rgba(255, 251, 238, 1) 100%);
}

.slot-content {
  position: relative;
  padding: 24rpx 40rpx 40rpx;
}

.btn-save {
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
}
</style>
